<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">菜单</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="void:0" [matMenuTriggerFor]="system">系统管理</a>

      <a mat-list-item href="void:0" (click)="logout()">退出登录</a>

      <mat-menu [overlapTrigger]="false" #system="matMenu">
        <button mat-menu-item [matMenuTriggerFor]="auth">用户模块</button>
        <button mat-menu-item>修改密码</button>
      </mat-menu>

      <mat-menu #auth="matMenu">
        <button mat-menu-item>用户管理</button>
        <button mat-menu-item>角色管理</button>
        <button mat-menu-item>权限管理</button>
      </mat-menu>

    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>管理系统</span>
    </mat-toolbar>

  </mat-sidenav-content>
</mat-sidenav-container>
